<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>

        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        #siwper {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            border: 3px solid #333;
            left: 35%;
        }

        #list {
            position: absolute;
            width: 2500px;
            height: 500px;
            z-index: 1;
        }

       #list img {
           float: left;
           width: 500px;
           height: 500px;
       }

       #buttons {
            position: absolute;
            left: 44%;
            bottom: 4%;
            z-index: 2;
            height: 10px;
            width: 300px;
       }

       #buttons span {
           float: left;
           border: 1px solid #fff;
           border-radius: 50%;
           background: #333;
           width: 10px;
           height: 10px;
           cursor: pointer;
       }

       #buttons .active {
           background: #f40;
       }
       
       .arrow {
           position: absolute;
           width: 40px;
           height: 40px;
           color: #fff;
           background: rgba(0, 0, 0, .3);
           z-index: 2;
           top: 44%;
           text-align: center;
           font-size: 38px;
           font-weight: bold;
           line-height: 34px;
           cursor: pointer;
           display: none;
       }

       .arrow:hover {
          background: rgba(0, 0, 0, .6);
       }

       #siwper:hover  .arrow {
           display: block;
       }

       #prex {
           left: 15px;
       }

       #next {
          right: 15px;
       }
    </style>

    <script type="text/javascript">
        window.onload = function (){
            var siwper = document.getElementById("siwper");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prex = document.getElementById("prex");
            var next = document.getElementById("next");
            var index = 1;
            var timer;

           function animate(offset) {
               var newLeft = parseInt(list.style.left) + offset;
               list.style.left = newLeft + 'px';
               //无限滚动判断
               if (newLeft > 0) {
                    list.style.left = -2000 + 'px';
                }
                if (newLeft < -2000) {
                    list.style.left = 0 + 'px';
                }
           }


           next.onclick = function () {
                //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
                index += 1;
                if (index > 5) {
                    index = 1
                }
                animate(-500);
                buttonsShow();
            };

            prex.onclick = function () {
                index -= 1;
                if (index < 1) {
                    index = 5
                }
                animate(500);
                buttonsShow();
            };

            function buttonsShow() {
                //将之前的小圆点的样式清除
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "active") {
                        buttons[i].className = "";
                    }
                }
                //数组从0开始，故index需要-1
                buttons[index - 1].className = "active";
            }

            for (var i = 0; i < buttons.length; i++) {
                (function (i) {
                    buttons[i].onclick = function () {

                        /*  这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                        /*  由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                        var clickIndex = parseInt(this.getAttribute('index'));
                        var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
                        animate(offset);
                        index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
                        buttonsShow();
                    }
                })(i)
            }
         
         //定时器的使用
         function play() {
             //重复执行定时器
             timer = setInterval(function() {
                 next.onclick();
             },2000);
         }

         //停止定时器
         function stop() {
             clearInterval(timer);
         }

        //鼠标放上面停止定时器，离开时执行定时器
        siwper.onmouseover = stop;
        siwper.onmouseout = play;

        //执行定时器
        play();

       


        }
    </script>


</head>




<body>
    <div  id="siwper">
       <div id="list" style="left: 0px;" >
          <img src="image/1.jpg" alt="第一张图片">
          <img src="image/2.jpg" alt="第二张图片">
          <img src="image/3.jpg" alt="第三张图片">
          <img src="image/4.jpg" alt="第四张图片">  
          <img src="image/5.jpg" alt="第五张图片">  
       </div>
       <div id="buttons">
          <span index="1" class="active"></span>
          <span index="2"></span>
          <span index="3"></span>
          <span index="4"></span>
          <span index="5"></span>
       </div>

       <a href="javascript:;" id="prex" class="arrow">&lt;</a>
       <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
    
</body>
</html>